<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02.jquery查找节点</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.js"></script>
</head>
<body>
    <div id="divNode">点击</div>
    <div class="a">点击1</div>
    <div class="a">点击2</div>
    <div class="a">点击3</div>

    <script>
        /*
         jquery 对象就是dom节点的集合
         dom节点添加$()  就可以将其转为jquery独享

         为什使用jquery： jquery 支持隐式迭代
        
        
        */
        // dom 对象
        var divNode = document.getElementById("divNode")
        console.dir(divNode);
        // jquey 获取节点  #获取的节点集合中的元素其实就是dom节点
        var $divNode = $("#divNode")
        console.dir($divNode);
        // 1. jquery对象转为dom对象
        console.dir($divNode[0]);
        $divNode[0].onclick = function() {
            alert(123)
        }
        // 2.dom对象如何转为jquery对象
        var $$divNode = $(divNode)
        console.dir($$divNode);
        console.log("===============================");
        // 原生方式注册事件
        // 1 获取class = a 的全部节点
        // var aNodes = document.querySelectorAll(".a")
        // // 2 遍历
        // for(var i = 0;i <aNodes.length;i++) {
        //     aNodes[i].onclick = function() {
        //          alert("123")
        //     }
        // }
        // jquery方式注册事件
        var aNodes = $(".a")
        // jquery 对象
        // console.dir(aNodes);
        aNodes.click(function() {
            alert("123")
        })
       

    </script>
</body>
</html>